<template>
<!--文章板块-->
  <div>
    <kinesis-container>
      <kinesis-element :strength="5" type="depth">
        <n-card :embedded="isdarkTheme" :bordered="!isdarkTheme">

          <!-- card 图片标题 -->
          <template #header>
            <n-h3 style="margin-bottom:0;" prefix="bar" type="primary">
              <n-ellipsis :tooltip="false" style="max-width: 100%">
                <span>
                  {{imgCardData.imgTitle}}
                </span>
              </n-ellipsis>
            </n-h3>
          </template>

          <!-- card 图片时间 -->
          <template #header-extra>
            <n-gradient-text>
              <span style="font-size: 12px;">
                收录时间： {{imgCardData.imgRecordTm }}<br/>
                <!-- 回忆时间： {{imgCardData.imgUpdateTm }} -->
              </span>
            </n-gradient-text>
            
            <!-- <n-gradient-text>
              <span style="margin-left: 10px; font-size: 12px;">
                更新时间： {{imgCardData.imgUpdateTm }}
              </span>
            </n-gradient-text> -->
          </template>

          
          <n-grid x-gap="5" :cols="24" class="content-container ">
            <n-gi :span="6">
              <div style="color: blueviolet">
                {{getChinese(imgCardData.ingDescription)}}
                <!-- <n-input 
                  style="
                    --n-border: none !important;        /* 默认状态 */
                    --n-border-hover: none !important;  /* 悬停状态 */
                    --n-border-focus: none !important;   /* 聚焦状态 */
                    --n-border-disabled: none !important; /* 禁用状态 */
                    background-color: transparent;       /* 可选：透明背景 */
                  "
                  type="textarea"
                  v-model:value="imgCardData.ingDescription"
                  placeholder="写点东西吧"
                  :rows="8"
                  @blur="handleImgBlur"
                /> -->
              </div>
            </n-gi>
            <n-gi :span="18" style="margin-left:20px">
              <n-ellipsis ref="scrollContainer" :tooltip="false" class="content-wrapper custom-scroll">
                <!-- <n-image
                  class="my_image"
                  :style="imageStyle"
                  :width="clientWidth > 2000 ? 370:290"
                  :height="clientWidth > 2000 ? 180:130"
                  :src="imgCardData.imgMinioRrl || ''"
                  preview-disabled
                  @click="detailsBtn(imgCardData.id)"
                /> -->
                <n-image
                  class="responsive-image"
                  :src="imgCardData.imgMinioRrl || ''"
                  :preview-disabled="true"
                  object-fit="contain"
                  :style="imageStyle"
                  @click="detailsBtn(imgCardData.id)"
                />
                <!-- <div class="text-content">
                  {{getChinese(imgCardData.ingDescription)}}
                </div> -->
              </n-ellipsis>        
            </n-gi>
          </n-grid>


          <!-- 图片标签 -->
          <template #footer>
            <n-space>
              <n-tag
                v-for="(label,index) in imgCardData.imgTags.split(',')" 
                :key="index"
                :type="index % 2 == 0 ? 'info' : 'error' "
                > 
                {{label}} 
              </n-tag>
            </n-space>
          </template>


          <template #action>

            <!-- <n-space justify="right" style="padding: 0px 0px">
              <n-switch
                :rail-style="railStyle"
                size="small"
                :value="switchValue"
                @update:value="handleUpdateValue"
              >
                <template #checked>{{ imgCardData.imgLetterChk }}</template>
                <template #unchecked>{{ imgCardData.imgLetterUnchk }}</template>
              </n-switch>
            </n-space> -->

            <n-space justify="right" style="margin-top: 0px">

              <!-- 点赞 -->
              <span style="margin-right: 56px">
                <n-icon :size="iconSize" color="red" :style="likeStyle" @click="handleLike">
                  <HeartSharp/>
                </n-icon>
                {{ imgCardData.imgLike }}
              </span>

              <!-- 留言 -->
              <span style="margin-right: 56px">
                <n-icon :size="iconSize">
                  <ChatbubbleEllipsesOutline/>
                </n-icon>20
              </span>

              <!-- 浏览量 -->
              <span>
                <n-icon :size="iconSize">
                  <EarthOutline/>
                </n-icon>
                {{ imgCardData.imgScan }}
              </span>

            </n-space>
          </template>

          
        </n-card>            
      </kinesis-element>

    </kinesis-container>

  </div>


</template>

<script setup lang="ts">
import {
  computed,
  ref,
  reactive,
  CSSProperties,
  watch,
  PropType,
  onMounted,
} from 'vue'
import { useRouter ,} from 'vue-router'
import {VaeStore} from "../../store";
import type {
  ImgDataType,
} from '../../utils/type'
import {storeToRefs} from "pinia";
import {getChinese} from '../../utils/function'
import {
  ChatbubbleEllipsesOutline, 
  EarthOutline, 
  HeartOutline, // 只有边框线
  Heart, // 填满的红心
  HeartSharp,
} from '@vicons/ionicons5'
import { useMessage } from 'naive-ui'
import dayjs from 'dayjs';
import request from '@/utils/request'

const store = VaeStore();
const router = useRouter()
const message = useMessage()

//接受传递过来的值
const { imgdata } = defineProps({
  imgdata:{
    type: Object as PropType<ImgDataType>,
    required: true},
})
const imgCardData = reactive({
  avatarBase64: '',
  currentPage: '',
  id: '',
  imgComment: 0,
  imgFreezeOrnnt: 0,
  imgLetterChk: '',
  imgLetterUnchk: '',
  imgLike: 0,
  imgMinioRrl: '',
  imgRecordTm: '',
  imgScan: 0,
  imgShowedRole: '',
  imgTags: '',
  imgTitle: '',
  imgUpdateTm: '',
  ingDescription: '',
  pageSize: 0,
  imgIsChk: false,
})
onMounted(() => {
  // console.log("imgdata",imgdata)
  Object.assign(imgCardData, imgdata)
  imgCardData.imgRecordTm = formatTime(imgCardData.imgRecordTm)
  imgCardData.imgUpdateTm = formatTime(imgCardData.imgUpdateTm)
  imgCardData.imgIsChk = imgdata.imgIsChk == 1 ? true : false
  switchValue.value = imgCardData.imgIsChk
})
const formatTime = (timeStr: string): string => {
  if (!timeStr) return '';
  return dayjs(timeStr).format('YYYY-MM-DD HH:mm:ss'); // 直接调用 format 方法
};
const scrollContainer = ref<HTMLElement>()
// 平滑滚动方法
const smoothScroll = (top: number) => {
  scrollContainer.value?.scrollTo({
    top,
    behavior: 'smooth'
  })
}

//解构pinia
let {clientWidth,distanceToTop,isdarkTheme} = storeToRefs(store);


const switchValue = ref(false)
const switchCheckedValue = ref('片刻后生成，平衡 忠诚 不息的身体')
const switchUnCheckedValue = ref('自然赠予你，树冠 微风 肩头的暴雨')
const railStyle = ({
  focused,
  checked
}: {
  focused: boolean
  checked: boolean
}): CSSProperties => {
  const style: CSSProperties = {}
  if (checked) {
    style.background = '#d03050'
    if (focused) {
      style.boxShadow = '0 0 0 2px #d0305040'
    }
  } else {
    style.background = '#2080f0'
    if (focused) {
      style.boxShadow = '0 0 0 2px #2080f040'
    }
  }
  return style
}

const handleUpdateValue = async (value: boolean) => {
  // console.log("imgCardData",imgCardData)
  switchValue.value = !switchValue.value
  // const msg = value ? switchCheckedValue.value : switchUnCheckedValue.value
  // message.info(`${msg}`)
  try {
    const res = request.post("/dragon/updateMemeryData",{
      id: imgCardData.id,
      // imgLetterChk: imgCardData.imgLetterChk,
      // imgLetterUnchk: imgCardData.imgLetterUnchk,
      imgIsChk: switchValue.value ? 1 : 0,
      imgLike: imgCardData.imgLike,
    });
    // @ts-ignore
    if (res.code && res.code == 200){

    } else {
      
    }
  } catch (err) {
    console.error((err as Error).message);
  }

}

const imageStyle = computed(() => ({
  width: clientWidth.value > 2000 ? '370' : '290',
  height: clientWidth.value > 2000 ? '180':'130',
  float: 'right',
  marginLeft: '16px',
  marginBottom: '8px'
}))

//查询回忆详情
const detailsBtn=(id:string)=>{
  //router.push({ path: `/articleDetails/${id}` });
  imgCardData.imgScan += 1; // 点进去就算是浏览了一次
  // try {
  //   const res = request.post(
  //     "/dragon/updateMemeryData",
  //     { id: imgCardData.id, imgScan: imgCardData.imgScan, }
  //   );
  // } catch (err) {
  //   console.error((err as Error).message);
  // }

}
//图标大小
const likeCount = ref(10)
const isLiked = ref(false)
const likeStyle = computed(() => ({
  // cursor: 'pointer',
  // backgroundColor: isLiked.value ? '#ff4d4f' : 'transparent',
  // borderRadius: '50%',
  // padding: '0px',
  // transition: 'all 0.3s'
}))
const iconSize=computed(()=>{
  return clientWidth.value > 800 ? 20:20;
})
const handleLike = () => {
  // likeCount.value++
  // isLiked.value = !isLiked.value
  imgCardData.imgLike += 1
  // console.log(imgCardData.imgLike)
  try {
    const res = request.post("/dragon/updateMemeryData",{
      id: imgCardData.id,
      imgLike: imgCardData.imgLike,
    });
  } catch (err) {
    console.error((err as Error).message);
  }
}

</script>

<style scoped>
.content-container {
  max-height: 500px; /* 控制最大高度 */

  /* // 弹性布局防止溢出 */
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  display: flow-root; /* 清除浮动 */
}

.text-content {
  text-align: justify;
  line-height: 1.6;
}
.my_image {
  vertical-align: top;
  padding:0px 5px;
  float: right;
}


.responsive-image {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9; /* 根据实际需求调整比例 */
  border-radius: 4px;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}

</style>    